<template>
  <div>
    <div>ChildA 组件</div>
    <!-- 
      $store.commit  是 Vuex 提供的专门用来调用 mutation 函数的
        第一个参数：表示 mutation 的名字，要告诉 Vuex 帮我调用哪个 mutation
     -->
    <div>
      count: {{ $store.state.count }}
      <button @click="onClick">+5+10+15</button>
      <button @click="onClick2">一秒后再+5</button>
    </div>
  </div>
</template>

<script>
// 组件的核心作用（为了复用）
//  复用，就意味着同一个组件模板，可能会有多个组件实例
//  如果 data 直接是一个对象，那么这一些组件实例，会共同这一个数据对象，那么就会出现 数据互相污染（互相影响、冲突），（因为对象在JS里面是一个引用数据类型，在传参传值时，用的是内存地址，所以，每个组件实例用的数据都是同一个内存地址）
//   为什么 data 换成函数，就不会互相影响了呢？
//      因为每次创建组件实例时，都会调用执行一下这个 data 函数，那么，每次调用返回的都是一个新的对象
export default {
  name: 'ChildA',
  // data: {
  //   count: 0
  // }
  // data() {
  //   return {
  //     count: 0,
  //   }
  // },
  methods: {
    onClick2() {
      // 在组件中如何调用 action 呢？
      this.$store.dispatch('addCount', 5)
    },
    onClick() {
      // 直接写 $store 表示，引用一个叫 $store 的变量，当前函数（局部）作用域下没有一个叫 $store 的变量，全局作用域下也没有一个叫 $store 的变量，所以，这里会有语法错误
      // this 指的是当前组件实例
      this.$store.commit('addCount', [5, 10, 15])
    },
  },
}
</script>

<style></style>
